<template>
  <el-dialog :title="title" :visible.sync="openDialog" @close="close">
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <el-form ref="addform" :model="form" label-suffix="：" :rules="rules" label-position="right" label-width="120px">
          <el-form-item label="供应商名称" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="缩略图">
            <el-input v-model="form.firstName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="身份证正反照" prop="PicUrl">
            <img v-if="listImageUrl" :src="listImageUrl" class="avatar" style="width:240px;height:174px" @click="openImgdailog()">
            <i v-else class="el-icon-plus avatar-uploader-icon" style="width:240px;height:174px;" @click="openImgdailog(1)" />
            <image-upload ref="upimg" :width="500" :height="350" @uploadSuccess="uploadSuccess" />
          </el-form-item>
          <el-form-item label="电话" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="地址" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开户行" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="账号" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="待结款" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button @click="openDialog = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { api_addAndUpdate } from '@/api/query'
export default {
  data() {
    return {
      id: '',
      title: '新增供应商信息',
      openDialog: false,
      form: {
        name: '',
        firstName: '',
        gys: '',
        PicUrl: ''
      },
      listImageUrl: '',
      rules: {
        name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        // PicUrl:[
        //   { required: true, message: '请上传供应商LOGO', trigger: 'change' },
        // ],
        gys: [
          { required: true, message: '请选择供应商供应商', trigger: 'change' }
        ]

      }

    }
  },
  computed: {
    queryData() {
      return {
        name: this.form.name,
        first_name: this.form.firstName,
        shop_id: this.form.gys,
        img: this.form.PicUrl,
        id: this.id
      }
    }
  },
  methods: {
    // 上传完成
    uploadSuccess(val, url) {
      console.log(val, '测试文件上传')
      this.listImageUrl = url
    },
    openImgdailog() {
      this.$nextTick(() => {
        this.$refs.upimg.init() // 传入图片类型参数
      })
    },
    init(val) {
      console.log(val)
      this.openDialog = true
      if (val) {
        this.title = '修改供应商信息'
        this.id = val.id
        this.form = {
          name: val.name,
          firstName: val.first_name,
          gys: val.shop_id,
          PicUrl: val.img
        }
      } else {
        this.title = '新增供应商信息'
        this.id = ''
      }
    },

    close() {
      this.$refs.addform.resetFields()
      this.form = this.$options.data().form
    },
    save() {
      this.$refs.addform.validate((valid) => {
        if (valid) {
          this.openDialog = false
          api_addAndUpdate('/brand/save', this.queryData).then((res) => {
            if (res) {
              this.$emit('save', '提交')
              this.$operateTip()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
